<template>
	<!-- 20230403 -->
	<view class="mp-weixin-auth-cn">

		<!-- 组件内容 -->
		<view class="cn-content">
			<ty-layer-pop-up @overlayClick="close" v-if="show">
				<!-- 浮层内容 -->
				<view class="layer-content padding-lr-50 padding-bottom-tab-bar bg-ff" @click.stop="">
					<!-- 关闭按钮 -->
					<text class="close-icon tyIcon-close text-26 text-aa" @click="close"></text>

					<view>
						<!-- 文案 -->
						<view class="padding-top-60">
							<view class="text-40 text-bold">获取你的昵称、头像</view>
							<view class="padding-tb-20 text-28 text-aa">获取用户头像、昵称，主要用于向用户提供具有辨识度的用户中心界面</view>
						</view>

						<!-- 头像昵称授权 -->
						<view class="">
							<view class="flex align-center border-top-ed border-bottom-ed" style="height: 130rpx;">
								<view class="text-30">头像</view>
								<button class="margin-left-20 flex-one" hover-class="none" open-type="chooseAvatar"
									@chooseavatar="chooseAvatar">
									<view class="flex-one flex align-center justify-between">
										<image class="jc-avatar-90"
											:src="headImgUrl ? headImgUrl : '/static/mine/headimg_no.png'"></image>
										<text class="tyIcon-arrow-right text-30 text-aa"></text>
									</view>
								</button>
							</view>
							<view class="flex align-center border-bottom-ed" style="height: 80rpx;">
								<view class="text-30">昵称</view>
								<view class="margin-left-20 flex-one">
									<input type="nickname" class="width-100p" maxlength="20" v-model="nickName"
										placeholder="请输入昵称" placeholder-class="text-28 text-aa"></input>
								</view>
							</view>
						</view>

						<!-- 保存按钮 -->
						<view
							class="margin-tb-30 width-100p line-height-80 radius-40 bg-main text-center text-28 text-ff"
							@click="submit">
							保存
						</view>
					</view>

				</view>
			</ty-layer-pop-up>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import file from "@/components/hzjc/utils/functions/file.js"
	export default {
		props: {
			// 浮层是否显示
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				// 头像
				headImgUrl: '',
				// 昵称
				nickName: ''
			}
		},
		methods: {
			/**
			 * 关闭浮层
			 * @date 2023-04-03
			 */
			close: function() {
				this.$emit("update:show", false)
			},

			/**
			 * 提交表单
			 * @date 2023-04-03
			 */
			submit() {
				this.$emit("submit", {
					// 头像
					headImgUrl: this.headImgUrl,
					// 昵称
					nickName: this.nickName
				})
			},

			/**
			 * 微信小程序获取头像
			 * @param {object} e
			 * @date 2023-04-03
			 */
			chooseAvatar(e) {
				console.log(e)
				// 上传
				uni.showLoading({
					mask: true,
					title: '正在上传'
				})

				let tempFile = e.detail.avatarUrl
				let fileQueue = []

				let name
				// 获取源文件名称
				let pos = tempFile.lastIndexOf('/')
				if (pos != -1) {
					name = tempFile.substring(pos + 1)
				}

				fileQueue.push({
					// 原文件名
					name: name,
					// 后缀
					ext: this.cn.getSuffix(name),
					// 路径
					path: tempFile
				})

				// 上传文件
				file.uploadFiles(fileQueue, [], 'image', false).then(res => {
					uni.hideLoading()
					this.headImgUrl = res[0]
				}).catch(res => {
					uni.hideLoading()
				})
			},

		}
	}
</script>

<style scoped>
	.layer-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	/* 关闭按钮 */
	.close-icon {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
</style>